<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.min.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>

<script src="/links/ace/src/ace.js"></script>
<script src="/links/ace/src/ext-language_tools.js"></script>
<script src="/links/beautify/beautify.min.js"></script>
<script src="/links/beautify/beautify-css.min.js"></script>
<script src="/links/beautify/beautify-html.min.js"></script>
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box" >
<div class="flex ac-table-head">
    <div class="ac-table-oper"><el-button size="medium"  v-if="pending.operVisible.buttonQ==undefined || pending.operVisible.buttonQ" @click="pending_load()" :disabled="pending.operDisabled.buttonQ"  type="text"     native-type="button">刷新(Q)</el-button>
</div>
    <div></div>
</div>
<div class="ac-table-content2">
    <el-table row-key="id" highlight-current-row stripe show-header border  
    :data="pending.data" size="mini" ref="pending"
       
    height="100%"
    @current-change="pending_currentChange">
    <el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="wfName" label="任务名称"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.wfName}}
   </template>
</el-table-column>
<el-table-column prop="busiDescribe" label="任务描述"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.busiDescribe}}
   </template>
</el-table-column>
<el-table-column prop="stepName" label="当前环节"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.stepName}}
   </template>
</el-table-column>
<el-table-column prop="creator" label="申请人"    align="left"   >
   <template slot-scope="scope">
        <template v-for="dict in customOptions.users" v-if="scope.row.creator==dict.value"><i :style="{color:dict.iconColor}" :class="dict.icon"></i> <label :style="{color:dict.fontColor}">{{dict.label}}</label></template>
   </template>
</el-table-column>
<el-table-column prop="createTime" label="申请时间"    align="left"   >
   <template slot-scope="scope">
         <template v-if="scope.row.createTime">
 <i class="el-icon-time"></i> {{dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
</template>

   </template>
</el-table-column>
<el-table-column prop="fromTime" label="本环节时间"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
         <template v-if="scope.row.fromTime">
 <i class="el-icon-time"></i> {{dayjs(scope.row.fromTime).format("YYYY-MM-DD HH:mm:ss")}}
</template>

   </template>
</el-table-column>
<el-table-column prop="multiaudit" label="会签"    align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.multiaudit"  size="small"  true-label="Y"  false-label="N" disabled ></el-checkbox>

   </template>
</el-table-column>
<el-table-column prop="oper" label="操作"    align="left"  show-overflow-tooltip ><template slot-scope="scope">
    <el-button size="small" type="text" @click="pending_detail(scope.row)">详情</el-button>
    |
    <el-button size="small" type="text" @click="pending_approval(scope.row)">审批</el-button>
</template></el-table-column>

</el-table>

</div>
<div class="flex">
    <div></div>
    <div> <el-pagination
      @size-change="pending_pageSizeChange"
      @current-change="pending_pageCurrentChange"
      :current-page="pending.pagingData.currentPage"
      :page-sizes="pending.pagingData.pageSizes"
      :page-size="pending.pagingData.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="pending.pagingData.total"
       
      >
    </el-pagination>
</div>
</div>
<el-dialog :visible.sync="wfApprove.visible" :title="wfApprove.title"
            width="50%"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;">
                <el-form class=""  label-width="80px" label-position="right"
     size="mini" ref="wfApprove" :model="wfApprove.data" :rules="wfApprove.rules"  
     :disabled="wfApprove.disabled" >
    <el-row><el-col :span=24 v-if="wfApprove.itemVisible.actionCode==undefined || wfApprove.itemVisible.actionCode">
    <el-form-item prop="actionCode" label="执行操作">
        
<el-input type="text" size="mini"  v-model="wfApprove.data.actionCode" placeholder="执行操作" :disabled="wfApprove.itemDisabled.actionCode"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="wfApprove.itemVisible.password==undefined || wfApprove.itemVisible.password">
    <el-form-item prop="password" label="用户密码">
        
<el-input type="text" size="mini"  v-model="wfApprove.data.password" placeholder="用户密码" :disabled="wfApprove.itemDisabled.password"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="wfApprove.itemVisible.comment==undefined || wfApprove.itemVisible.comment">
    <el-form-item prop="comment" label="审批意见">
        <el-input type="textarea" size="mini"  v-model="wfApprove.data.comment" placeholder="审批意见" :rows="5" :autosize="false" :disabled="wfApprove.itemDisabled.comment"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="wfApprove.itemVisible.nextAuditUser==undefined || wfApprove.itemVisible.nextAuditUser">
    <el-form-item prop="nextAuditUser" label="下一步审批人">
        
<el-input type="text" size="mini"  v-model="wfApprove.data.nextAuditUser" placeholder="下一步审批人" :disabled="wfApprove.itemDisabled.nextAuditUser"  ></el-input>

        
    </el-form-item>
</el-col>
</el-row>
 </el-form>

            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="wfApprove_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="wfApprove_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>


</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"pending":{"title":"待处理任务","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{"currentPage":1,"total":0,"pageSize":20,"pageSizes":[10,20,30,40,50,100]},"operData":{},"operVisible":{},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"page":{},"tabDisabled":{},"tabVisible":{},"customOptions":{},"dictOptions":{},"wfApprove":{"visible":false,"title":"流程审批","data":{},"operData":{},"operVisible":{},"operDisabled":{},"disabled":false,"editorForm":true,"itemVisible":{},"itemDisabled":{},"transfer":{},"rules":{"actionCode":[{"required":true,"message":"请输入执行操作","trigger":"blur"}]}}}
            },
            watch: {
},
            methods: {
wfApprove_dialogOpen:function(param,callback){
    this.$data.wfApprove.data = this.$options.data().wfApprove.data;
    this.$data.wfApprove.operData = this.$options.data().wfApprove.operData;
    for(let val in param) {
        this.$set(this.wfApprove.data, val, param[val])
    }
    this.wfApprove.callback=callback;
    this.wfApprove.visible = true;
}
,
wfApprove_dialogOk:function(){
    let that = this;
    this.$refs.wfApprove.validate(function(valid){
        if(valid){
            that.wfApprove.callback(that.wfApprove.data);
        }else{
            return false;
        }
    });
},
pending_detail:function(row) {
    let param = {};
    param.wfRecordStepId = row.id;
    HttpApi.pageDialog(row.detailView,row.stepName, param)
},
pending_pageCurrentChange:function(currentPage){
    this.pending.pagingData.currentPage=currentPage;
    this.pending_load();
}
,
pending_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.stdSolReceiveHistory.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.stdSolReceiveHistory.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
pending_pageSizeChange:function(pageSize){
    this.pending.pagingData.pageSize=pageSize;
    this.pending_load();
}
,
pending_editWfApprove:function(){
    /*没有定义方法模板，需要去定义方法模板*/
    let that = this;
     this.wfApprove_dialogOpen({},function(dialogData){
         that.wfApprove.visible = false;
     })
}
,
pending_change:function(fieldName,row){
    HttpApi.updateProvider("autocodeWfRecordStep",fieldName,row,function(){
                        
    });
},
pending_load:function() {
    let that = this;
    let param = {};
    param.pagingData = this.pending.pagingData;
    param.operData = this.pending.operData;
    HttpApi.post("/platform/tasks/pending", param, function(res) {
        console.log(res);
        that.pending.pagingData = res.pagingData;
        that.pending.data = res.data;
        if (that.pending.data.length > 0) {
            that.$refs.pending.setCurrentRow(that.pending.data[0]);
            that.pending_operCtrl(that.pending.data[0]);
        } else {
            that.$refs.pending.setCurrentRow();
            that.pending_operCtrl();
        }
    });
},
wfApprove_dialogCancel:function(){
     this.wfApprove.visible = false;
},
wfApprove_load:function(){
    let that = this;
    HttpApi.post("/platform/platformTasks/load",this.wfApprove.operData,function(res){
        that.wfApprove.data = res;
    });
},
pending_approval:function(row) {
    let that = this;
    let param =  {};
    param.wfRecordStepId = row.id;
    this.wfApprove_dialogOpen(param, function(dialogData) {
        HttpApi.post("/platform/platformTasks/approval", dialogData, function(res) {
            //请补充方法执行成功后要做的操作
            that.wfApprove.visible = false;
        })
    })
},
pending_currentChange:function(currentRow){
    if(!currentRow){
        //如果没有传入值，则将当前的选中值清空
        this.$data.pending.currentRow = this.$options.data().pending.currentRow;
    }else{
        this.pending.currentRow = currentRow;
    }
    this.pending_operCtrl(currentRow);
},
wfApprove_change:function(fieldName){
    HttpApi.updateProvider("",fieldName,this.wfApprove.data,function(){

    });
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.dictOptions([],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    HttpApi.customOptions("users",{},function(res){
    that.$set(that.customOptions, "users", res);
});


    //加载初始化load
    this.pending_load();


    //加载初始化方法
    
}
    });
</script>
</html>
